import React, { Component } from 'react'
import PropTypes from 'prop-types'
import {nanoid} from 'nanoid'
import './index.css';
export default class Header extends Component {
//对组件进行类型和必要性的限制
static propTypes={
  addPut:PropTypes.func.isRequired,
}
  hanldKey=(event)=>{
    //获取用户点击结束的值,回车键。
   if(event.keyCode!==13) return;
   //加入判断trim是判断不可以用空格。
   if(event.target.value.trim()==''){
     alert('输入对象不能为空');
     return
   }
   //对方想要一个对象，现在我们只准备一个name，不够，必须自定义一个对象
   const dataObj={id:nanoid(),name:event.target.value,done:false};
//并且把这个对象传给父级，让父级更新。
   this.props.addPut(dataObj);
   //最后不能让输入框残留数据，要进行清除，
   event.target.value='';
  }
  
  render() {
    return (
         <div className="todo-header">
            <input type="text"onKeyUp={this.hanldKey} placeholder="请输入你的任务名称，按回车键确认" />
          </div>
    )
  }
}

